<template>
  <view class="online-homework-list">
    <back :back-title="backTitle"></back>
    <search></search>
    <mescroll-uni :top="220" :bottom="0" :down="downOption" @down="pullRefresh" :up="upOption" @up="pullUp">
      <view class="list">
				<view class="item" @click="handleDetail">
					<view class="time">05月20日  17：40</view>
					<view class="sub-item">
						<view class="title">第二单元第五节课练习题</view>
            <view class="sub-title">一 选择题</view>
            <view class="desc">高考语文冲刺名师特训营高考语文冲刺名师特高考语文冲刺名师特训营高考语文冲刺名师特</view>
            <view class="check-detail">点击可查看详情</view>
					</view>
				</view>
			</view>
    </mescroll-uni>
  </view>
</template>

<script>
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {
  name: 'onlineHomeworkList',
  components: {
    MescrollUni
  },
  data() {
    return {
      backTitle: '在线作业列表',
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
      },
      upOption: {
        auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        empty: {
          tip: '暂无相关数据'
        }
      }
    }
  },
  methods: {
    // 上拉
    pullUp(mescroll) {
      console.log('上拉')
    },
    // 刷新
    pullRefresh(mescroll) {
      console.log('刷新')
      setTimeout(() => {
        mescroll.endSuccess()
      }, 2000)
    },
		handleDetail() {
			console.log(111)
			uni.navigateTo({
				url: '/pages/online-homework/children/detail/index'
			})
		}
  }
}

</script>
<style lang='scss' scoped>
.online-homework-list{
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
	.list{
		width: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
		.item {
			width: 100%;
			padding-top: 62upx;
			box-sizing: border-box;
			.time{
				width:247upx;
				height:41upx;
				background:rgba(204,204,204,1);
				border-radius:20upx;
				margin: 0 auto;
				margin-bottom: 62upx;
        text-align: center;
        line-height: 41upx;
        color:#FEFEFE;
			}
			.sub-item{
				width:100%;
				background:rgba(240,240,240,1);
				padding: 12upx 42upx 14upx;
				border-radius:42upx;
				box-sizing: border-box;
        margin-bottom: 42upx;
        &:nth-last-of-type(1){
          margin-bottom: 0;
        }
				.title{
					font-size:30upx;
					font-weight:bold;
					color:rgba(13,132,213,1);
					line-height:58upx;
				}
        .sub-title{
          font-size: 30upx;
          line-height: 38upx;
          color: #333;
        }
        .desc{
          font-size: 30upx;
          line-height: 38upx;
          color: #343434;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .check-detail{
          font-size:25upx;
          line-height: 56upx;
          color:#999999;
          font-weight:500;
        }
			}
		}
	}
}
</style>